<template>
	<view class="position-relative" :elevation="elevation">
		<image v-if="isBackgroundImage" class="position-absolute-cover" :src="background" mode="aspectFill"
		:style="{opacity: opacity}"></image>
		<view v-else class="position-absolute-cover" :style="{background: background, opacity: opacity}"></view>
		<com-status-bar></com-status-bar>
		<view class="find-detail-nav y-flex y-row y-align-center pl-30 pr-30">
			<find-capsule class="mr-30" :border="capsuleBorder" :mode="mode" :data="['back', 'home']" @iconClick="handleBackIconClick" v-if="backShow"></find-capsule>
			<view class="find-search-input y-flex y-row y-align-center y-flex-1" :style="{'background-color': inputBgColor}" v-if="inputShow" @tap="handleInputClick">
				<com-icon name="search" size="28" weight="bold" :color="inputTextColor"></com-icon>
				<com-text style="margin-left: 20rpx" :value="title" size="26" :color="inputTextColor"></com-text>
			</view>	
			<text class="y-flex-1 fs-33 lines-1" :class="{'text-align-center': backShow}" v-else :style="{color: textColor, opacity: opacity}">{{title}}</text>
			<find-capsule class="ml-30" :border="capsuleBorder" :mode="mode" :data=" debug ? ['warn', 'more', 'close'] : ['more', 'close']" @iconClick="handleMoreIconClick"></find-capsule>
		</view>
	</view>
</template>

<script>
	import FindCapsule from './FindCapsule.vue'
	export default {
		inject: ['closeApp', 'backHome', 'navigate', 'showUtils', 'showDevTools'],
		components: {
			FindCapsule
		},
		props: {
			transparent: {
				type: Boolean,
				default: false
			},
			backShow: {
				type: Boolean,
				default: false
			},
			background: {
				type: String,
				default: ''
			},
			backgroundOpacity: {
				type: [Number, String],
				default: 1
			},
			textColor: {
				type: String,
				default: ''
			},
			inputBgColor: {
				type: String,
				default: ''
			},
			inputUrl: {
				type: String,
				default: ''
			},
			inputTextColor: {
				type: String,
				default: ''
			},
			inputShow: {
				type: Boolean,
				default: false
			},
			scrollTop: {
				type: [String, Number],
				default: 0
			},
			mode: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			capsuleBorder: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			//是否开启调试模式
			debug () {
				return this.$store.getters['setting/GET_DEBUG']
			},
			//导航栏背景是否图片
			isBackgroundImage () {
				return this.background.startsWith('http://') || this.background.startsWith('https://')
			},
			//透明度（开启transparent后根据滚动距离改变）
			opacity () {
				const max = this.backgroundOpacity
				return this.transparent ? (this.scrollTop / 100 > max ? max : this.scrollTop / 100) : max
			},
			//导航栏阴影（开启transparent后根据滚动距离改变）
			elevation () {
				const max = 1
				const rate = this.transparent ? (this.scrollTop / 100 > max ? max : this.scrollTop / 100) : max
				return (10 * rate) + 'px'
			}
		},
		methods: {
			handleBackIconClick (e) {
				if ( e == 'back' ) uni.navigateBack()
				if ( e == 'home' ) this.backHome()
			},
			handleMoreIconClick (e) {
				if ( e == 'warn' ) this.showDevTools()
				if ( e == 'more' ) this.showUtils()
				if ( e == 'close' ) this.closeApp()
			},
			handleInputClick () {
				this.navigate(this.inputUrl)
			}
		}
	}
</script>

<style>
	.find-detail-nav {
		height: 100rpx;
	}
	.find-nav-icon-box {
		width: 65rpx;
		height: 65rpx;
		border-radius: 65rpx;
	}
	.find-search-input {
		padding: 0 30rpx;
		height: 60rpx;
		border-radius: 60rpx;
	}
</style>